<template>
  <div class="warehousing-list table-theme">
    <head-title title="库存--入库统计"></head-title>
    <el-card>
      <div class="warehousing-list-menu">
        <div class="warehousing-list-menu-left">
          <div class="data-filtering-left">
            <p style="line-height: 40px; margin-right: 10px">请选择</p>
            <div class="select-view">
              <el-date-picker
                @change="selectTime"
                v-model="selectModel.time"
                type="daterange"
                align="right"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
            <div class="select-view">
              <el-cascader
                v-model="region_id"
                :options="regionList"
                :props="{
                  children: 'child',
                  value: 'region_id',
                  label: 'region_name',
                }"
                @change="init(1)"
              ></el-cascader>
            </div>
          </div>
        </div>
        <div class="warehousing-list-menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="searchOption"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
          <div class="add" style="margin-top: 5px; margin-right: 10px">
            <el-button type="primary" size="small" @click="exportDialog"
              >导出</el-button
            >
          </div>
        </div>
      </div>
      <p class="data-number">
        <span style="margin-right:20px">总包件数：{{count_pack}}</span>
        <span>总数据数：{{ total }}</span>
        
      </p>
      <el-table :data="wList" border>
        <el-table-column
          label="序号"
          align="center"
          prop="order_goods_data_id"
        ></el-table-column>
        <el-table-column
          label="ID"
          align="center"
          prop="rec_id"
        ></el-table-column>
        <el-table-column
          label="订单编号"
          align="center"
          prop="order_sn"
        ></el-table-column>
        <el-table-column
          label="平台款号"
          align="center"
          prop="sku_sn"
        ></el-table-column>
        <el-table-column
          label="名称"
          align="center"
          prop="goods_name"
        ></el-table-column>
        <el-table-column
          label="数量"
          align="center"
          prop="goods_number"
        ></el-table-column>
        <el-table-column label="图片" align="center" width="80">
          <template slot-scope="scope">
            <ImgPopover :src="scope.row.img"></ImgPopover>
          </template>
        </el-table-column>
        <el-table-column
          label="颜色"
          align="center"
          prop="color"
        ></el-table-column>
        <el-table-column
          label="材质"
          align="center"
          prop="lining"
        ></el-table-column>
        <el-table-column
          label="尺寸"
          align="center"
          prop="size"
        ></el-table-column>
        <el-table-column
          label="区域"
          align="center"
          prop="region_name"
        ></el-table-column>
        <el-table-column label="入仓体积" align="center">
          <template slot-scope="scope">
            <P>{{ scope.row.goods_bulk }}m³</P>
          </template>
        </el-table-column>
        <el-table-column label="入仓件数" align="center">
          <template slot-scope="scope">
            <P>{{ scope.row.goods_pack }}件</P>
          </template>
        </el-table-column>
        <el-table-column
          label="入仓时间"
          align="center"
          prop="warehouse_time"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="
                editBulk(
                  scope.row.rec_id,
                  scope.row.goods_bulk,
                  scope.row.goods_pack,
                  scope.row.region_id
                )
              "
              >修改包件体积</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="goOrderDetails(scope.row.order_id)"
              >订单详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>

    <el-dialog
      title="修改"
      :visible.sync="editDialog"
      center
      :modal-append-to-body="false"
      width="680px"
    >
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editForm"
        label-width="100px"
      >
        <el-form-item label="入仓体积:" prop="goods_bulk">
          <el-input
            v-model="editForm.goods_bulk"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="入仓件数:" prop="goods_pack">
          <el-input
            v-model="editForm.goods_pack"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="分区:" prop="region_id">
          <el-cascader
            style="width: 100%"
            v-model="editForm.region_id"
            :options="regionList"
            :props="{
              children: 'child',
              value: 'region_id',
              label: 'region_name',
            }"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmClick('editForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
export default {
  components: {
    ImgPopover,
  },
  data() {
    return {
      editDialog: false,
      editForm: {
        rec_id: "",
        goods_bulk: "",
        goods_pack: "",
        region_id: "",
      },
      editFormRules: {
        goods_bulk: [
          {
            required: true,
            message: "必填",
          },
        ],
        goods_pack: [
          {
            required: true,
            message: "必填",
          },
        ],
        region_id: [
          {
            required: true,
            message: "必填",
          },
        ],
      },
      selectContent: "", // 分类搜索平输入框的值
      classSelect: "", // 分类搜索
      searchOption: [
        {
          value: 0,
          label: "订单号",
        },
        {
          value: 1,
          label: "收货人",
        },
        {
          value: 2,
          label: "手机号码",
        },
      ],
      selectModel: {
        time: "", // 时间
      },
      wList: [],
      total: 0,
      totalData: 0,
      page: 0,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      regionList: [],
      region_id: [],
      count_pack:0
    };
  },
  methods: {
    // 初始化列表
    init(e) {
      this.page = e;
      let region_id = this.region_id[this.region_id.length -1];
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: 10,
        order_by: "order_goods_data_id",
        asc: 2,
        region_id,
      };

      // 选择了时间
      if (this.selectModel.time != "" && this.selectModel.time != null) {
        data.start_time = this.selectModel.time[0];
        data.end_time = this.selectModel.time[1];
      }

      if (this.classSelect == 0) {
        data.order_sn = this.selectContent;
      } else if (this.classSelect == 1) {
        data.accept_name = this.selectContent;
      } else if (this.classSelect == 2) {
        data.mobile_phone = this.selectContent;
      }

      this.$http(this.$ApiList.WarehousingList, data).then((res) => {
        this.wList = res.datas.data;
        this.total = res.datas.count;
        this.count_pack = res.datas.count_pack
      });
    },
    goSearch(classSelect, selectContent) {
      this.classSelect = classSelect;
      this.selectContent = selectContent;
      this.init();
    },
    // 刷新
    refreshPage() {
      this.classSelect = "";
      this.selectContent = "";
      this.page = 1;
      this.selectModel.time = "";
      this.init();
    },
    selectTime() {
      this.init();
    },
    goOrderDetails(id) {
      this.$router.push({
        path: "/order_details",
        query: {
          id: id,
        },
      });
    },
    editBulk(rec_id, goods_bulk, goods_pack, region_id) {
      this.editForm.rec_id = rec_id;
      this.editForm.goods_bulk = goods_bulk;
      this.editForm.goods_pack = goods_pack;
      this.regionList.map((item) => {
        item.child.map((data) => {
          if (data.region_id == region_id) {
            this.$set(this.editForm, "region_id", [
              item.region_id,
              data.region_id,
            ]);
          }
        });
      });
      this.editDialog = true;
    },
    //提交
    confirmClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editForm.region_id = this.editForm.region_id.pop();
          this.$http(this.$ApiList.OrderUpdateWarehouse, this.editForm).then(
            (res) => {
              this.$layer.msg(res.datas);
              this.init();
              this.editDialog = false;
            }
          );
        } else {
          this.$layer.msg("请填写完整信息后提交");
        }
      });
    },
    // 导出
    exportDialog() {
      if (!this.selectModel.time.length) {
        this.$message.warning("请选择日期");
        return;
      }
      let url = `${this.$domain}furniture/Adminexcel/WarehousingListGetData?
						   start_time=${this.selectModel.time[0]}&end_time=${this.selectModel.time[1]}`;
      if (this.classSelect == 0) {
        url = `${url}&order_sn=${this.selectContent}`;
      }
      window.location.href = url;
    },
    initSelect() {
      this.$http(this.$ApiList.SelectRegionList).then((res) => {
        const { datas } = res;
        this.regionList = datas;
      });
    },
  },
  created() {
    this.init();
    this.initSelect();
  },
};
</script>
<style lang="scss">
.warehousing-list {
  .warehousing-list-menu {
    display: flex;
    .select-view {
      margin-right: 10px;
    }
  }

  .data-filtering-left {
    display: flex;
  }

  .warehousing-list-menu .add {
    margin-left: 10px;
  }

  .warehousing-list-menu-left {
    flex: 1;
    display: flex;
  }

  .warehousing-list-menu-right {
    flex: 1;
    display: flex;
    flex-direction: row-reverse;
  }

  .warehousing-list-menu .search-view {
    margin-right: 10px;
  }
}
</style>
